<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Nikolius Luiso" />  
<title>jQuery Autocomplete Demo</title>
<!--load library framework jquery-->
<script type="text/javascript" src="<?php echo base_url()?>js/jquery144.min.js"></script>
<!--load library plugin jquery autocomplete-->
<script type="text/javascript" src="<?php echo base_url()?>js/jquery.autocomplete.js"></script>
<script type="text/javascript">
/*script dibawah ini adalah script jquery untuk menjalankan plugin autocomplete nya*/
$(function() {
    /*cari elemen dengan id="inputCari"*/
 $("#inputCari").autocomplete({
        /*url ajax autocomplete yg dituju*/
  url: '<?php echo base_url();?>latihan/pencarian/',
        /*hasil kembalian dari ajax tadi dikasih tag span agar bisa berwarna merah*/
  showResult: function(value, data) {
   return '<span style="color:red">' + value + '</span>';
  },
        /*jumlah item maksimal yg akan ditampilkan*/  
  maxItemsToShow: 8
 });
});
</script>
<!--load file css yg diperlukan-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/base.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/style.css">
</head>
<body>
<div id="container">
 <h1>Demo jQuery Autocomplete</h1>
 <div align="center"> 
 <form>
  <span style="margin-right:30px;">Pencarian</span>
  <input type="text" size="35" id="inputCari" />     
 </form>
 </div> 
 <br style="clear:both;" />   
 <div id="copyright" align="right">
  Copyright 2011 <a href="http://nikolius-luiso.web.id" title="">Nikolius Luiso</a>
 </div>
</div>  
</body>
</html>